// import React from 'react';
// import ReactDOM from 'react-dom';
// import './index.css';
// function Square(props) {
//   return (
//     <button className="square" onClick={props.onClick}>
//       {props.value}
//     </button>
//   );
// }

// class Board extends React.Component {
//   renderSquare(i) {
//     return (
//       <Square
//         value={this.props.squares[i]}
//         onClick={() => this.props.onClick(i)}
//       />
//     );
//   }

//   render() {
//     return (
//       <div>
//         <div className="board-row">
//           {this.renderSquare(0)}
//           {this.renderSquare(1)}
//           {this.renderSquare(2)}
//         </div>
//         <div className="board-row">
//           {this.renderSquare(3)}
//           {this.renderSquare(4)}
//           {this.renderSquare(5)}
//         </div>
//         <div className="board-row">
//           {this.renderSquare(6)}
//           {this.renderSquare(7)}
//           {this.renderSquare(8)}
//         </div>
//       </div>
//     );
//   }
// }

// class Game extends React.Component {
//   constructor(props) {
//     super(props);
//     this.state = {
//       history: [
//         {
//           squares: Array(9).fill(null)
//         }
//       ],
//       stepNumber: 0,
//       xIsNext: true
//     };
//   }

//   handleClick(i) {
//     const history = this.state.history.slice(0, this.state.stepNumber + 1);
//     const current = history[history.length - 1];
//     const squares = current.squares.slice();
//     if (calculateWinner(squares) || squares[i]) {
//       return;
//     }
//     squares[i] = this.state.xIsNext ? "X" : "O";
//     this.setState({
//       history: history.concat([
//         {
//           squares: squares
//         }
//       ]),
//       stepNumber: history.length,
//       xIsNext: !this.state.xIsNext
//     });
//   }

//   jumpTo(step) {
//     this.setState({
//       stepNumber: step,
//       xIsNext: (step % 2) === 0
//     });
//   }

//   render() {
//     const history = this.state.history;
//     const current = history[this.state.stepNumber];
//     const winner = calculateWinner(current.squares);

//     const moves = history.map((step, move) => {
//       const desc = move ?
//         'Go to move #' + move :
//         'Go to game start';
//       return (
//         <li key={move}>
//           <button onClick={() => this.jumpTo(move)}>{desc}</button>
//         </li>
//       );
//     });

//     let status;
//     if (winner) {
//       status = "Winner: " + winner;
//     } else {
//       status = "Next player: " + (this.state.xIsNext ? "X" : "O");
//     }

//     return (
//       <div className="game">
//         <div className="game-board">
//           <Board
//             squares={current.squares}
//             onClick={i => this.handleClick(i)}
//           />
//         </div>
//         <div className="game-info">
//           <div>{status}</div>
//           <ol>{moves}</ol>
//         </div>
//       </div>
//     );
//   }
// }

// // ========================================

// ReactDOM.render(<Game />, document.getElementById("root"));

// function calculateWinner(squares) {
//   const lines = [
//     [0, 1, 2],
//     [3, 4, 5],
//     [6, 7, 8],
//     [0, 3, 6],
//     [1, 4, 7],
//     [2, 5, 8],
//     [0, 4, 8],
//     [2, 4, 6]
//   ];
//   for (let i = 0; i < lines.length; i++) {
//     const [a, b, c] = lines[i];
//     if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
//       return squares[a];
//     }
//   }
//   return null;
// }










import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { HighOrderSecond } from './log';

import img3 from './cat.jpg';
import $ from 'jquery';
import { LocaleProvider, Input, Button, Table } from 'antd';
import { } from 'react-router';
import { Router, Route, Link, BrowserRouter } from 'react-router-dom';
import { BasicExample } from './index2';

class Index extends Component {
  render() {
    return (
      <div>
        <Header />
        <Content />
        <Footer />
      </div>
    )
  }
}
var a = <h1>This is header !</h1>;
class Header extends Component {

  render() {
    return a;
  }
}



class Content extends Component {
  render() {
    return (
      <h1>This is Content !</h1>
    )
  }
}


class Footer extends Component {
  render() {
    return (
      <h1>This is footer !</h1>
    )
  }
}



class ShoppingList extends React.Component {
  constructor() { 

  }
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}




function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}
function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}
function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return isLoggedIn ? (<UserGreeting />): (<GuestGreeting />);
}




class LoginControl extends React.Component {
  constructor(props) {
    super(props);

    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;

    let button = null;
    if (isLoggedIn) {
      button = <LogoutButton onClick={()=>this.handleLogoutClick()} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick.bind(this)} />;
    }
    const messages = ['React', 'Re: React', 'Re:Re: React'];
    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button},
        <Mailbox unreadMessages={messages} />,
      </div>
    );
  }
}

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}




function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div className="warning">
      Warning!{2**8}
    </div>
  );
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showWarning: true}
    this.handleToggleClick = this.handleToggleClick.bind(this);
  }

  handleToggleClick() {
    // this.setState(prevState => ({
    //   showWarning: !prevState.showWarning
    // }));
    this.setState({showWarning: !this.state.showWarning});
  }

  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />
        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Hide' : 'Show'}
        </button>
      </div>
    );
  }
}



function Water(props) {
  return (
    <div>
      {props.val>100 ? <p>水会烧开</p> : <p>谁不会烧开</p>}
    </div>
  );
}




 


// class Water extends Comment { 
//   water(props) { 
//     const state = props.state;
//     return (
//       <div>
//         {props.state ? <p>水会烧开</p> : <p>谁不会烧开</p>}
//       </div>
//     );
//   }
//   render() { 

//     return (
//       water();
//     );
//   }
// }


class Calculator2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {temperature: ''};
  }

  change(e) {
    this.setState({temperature: e.target.value});
  }

  render() {
    const temperature = this.state.temperature;
    return (
      <fieldset>
        <legend>输入一个摄氏温度</legend>
        <input
          value={temperature}
          onChange={this.change.bind(this)} />

        <Water
          val={parseFloat(temperature)} />

      </fieldset>
    );
  }
}





const scaleNames = {
  c: 'Celsius',
  f: 'Fahrenheit'
};

function toCelsius(fahrenheit) {
  return (fahrenheit - 32) * 5 / 9;
}

function toFahrenheit(celsius) {
  return (celsius * 9 / 5) + 32;
}

function tryConvert(temperature, convert) {
  const input = parseFloat(temperature);
  if (Number.isNaN(input)) {
    return '';
  }
  const output = convert(input);
  const rounded = Math.round(output * 1000) / 1000;
  return rounded.toString();
}

function BoilingVerdict(props) {
  if (props.celsius >= 100) {
    return <p>The water would boil.</p>;
  }
  return <p>The water would not boil.</p>;
}

class TemperatureInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.props.onTemperatureChange(e.target.value);
  }

  render() {
    const temperature = this.props.temperature;
    const scale = this.props.scale;
    return (
      <fieldset>
        <legend>Enter temperature in {scaleNames[scale]}:</legend>
        <input value={temperature}
               onChange={this.handleChange} />
      </fieldset>
    );
  }
}

class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
    this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
    this.state = {temperature: '', scale: 'c'};
  }

  handleCelsiusChange(temperaturee) {
    this.setState({scale: 'c', temperature:temperaturee});
  }

  handleFahrenheitChange(temperature) {
    this.setState({scale: 'f', temperature:temperature});
  }

  render() {
    const scale = this.state.scale;
    const temperature = this.state.temperature;
    const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
    const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;

    return (
      <div>
        <TemperatureInput
          scale="c"
          temperature={celsius}
          onTemperatureChange={this.handleCelsiusChange} />
        <TemperatureInput
          scale="f"
          temperature={fahrenheit}
          onTemperatureChange={this.handleFahrenheitChange} />
        <BoilingVerdict
          celsius={parseFloat(celsius)} />
      </div>
    );
  }
}



class CustomTextInput3 extends React.Component {
  constructor(props) {
    super(props);
    // 创建 ref 存储 textInput DOM 元素
    this.textInput = React.createRef();
    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {
    // 直接使用原生 API 使 text 输入框获得焦点
    // 注意：通过 "current" 取得 DOM 节点
    alert("1");
    this.textInput.current.focus();
  }

  render() {
    // 告诉 React 我们想把 <input> ref 关联到构造器里创建的 `textInput` 上
    return (
      <div>
        <input
          type="text"
          ref={this.textInput} />

          
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focusTextInput}
        />
      </div>
    );
  }
}

var c = null;

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    // 创建 ref 存储 textInput DOM 元素
    this.textInput = React.createRef();
    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {
    // 直接使用原生 API 使 text 输入框获得焦点
    // 注意：通过 "current" 取得 DOM 节点
    this.textInput.current.focus();
  }

  render() {
    // 告诉 React 我们想把 <input> ref 关联到构造器里创建的 `textInput` 上
    return (
      <div >
        <input
          type="text" id="测试" ref={this.textInput}
          />

          
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focusTextInput}
        />
      </div>
    );
  }
}


class AutoFocusTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.textInput1 = React.createRef();
  }

  componentDidMount() {
    this.textInput1.current.focusTextInput();
  }

  render() {
    return (
      <CustomTextInput ref={this.textInput1} />
    );
  }
}


// 创建一个 theme Context,  默认 theme 的值为 light
const ThemeContext = React.createContext('light');

function ThemedButton(props) {
  // ThemedButton 组件从 context 接收 theme
  return (
    <ThemeContext.Consumer>
      {theme => <> <p>{theme}</p>  <button {...props} theme={theme} /></>}
    </ThemeContext.Consumer>
  );
}

// 中间组件
function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

class App extends React.Component {
  render() {
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}



class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.input = React.createRef();
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.current.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={this.input}  id="kkk" />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}
class HelloMessage extends React.Component {
  render() {
    return <div>Hello <x-search>2121112121</x-search>!</div>;
  }
}

ReactDOM.render(
  <div>
  <Index />
    <LoginControl />
    <Page />
    <AutoFocusTextInput />
    <App />
    <NameForm />
    <HelloMessage />
    <Calculator2/>
  </div>, 
 
  document.getElementById('root')
)









































// These two containers are siblings in the DOM
const appRoot = document.getElementById('app-root');
const modalRoot = document.getElementById('modal-root');

// Let's create a Modal component that is an abstraction around
// the portal API.
class Modal extends React.Component {
  constructor(props) {
    super(props);
    // Create a div that we'll render the modal into. Because each
    // Modal component has its own element, we can render multiple
    // modal components into the modal container.
    this.el = document.createElement('div');
  }

  componentDidMount() {
    // Append the element into the DOM on mount. We'll render
    // into the modal container element (see the HTML tab).
    modalRoot.appendChild(this.el);
  }

  componentWillUnmount() {
    // Remove the element from the DOM when we unmount
    modalRoot.removeChild(this.el);
  }
  
  render() {
    // Use a portal to render the children into the element
    return ReactDOM.createPortal(
      // Any valid React child: JSX, strings, arrays, etc.
      this.props.children,
      // A DOM element
      this.el,
    );
  }
}

// The Modal component is a normal React component, so we can
// render it wherever we like without needing to know that it's
// implemented with portals.
class AppO extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showModal: false};
    
    this.handleShow = this.handleShow.bind(this);
    this.handleHide = this.handleHide.bind(this);
  }

  handleShow() {
    this.setState({showModal: true});
  }
  
  handleHide() {
    this.setState({showModal: false});
  }

  render() {
    // Show a Modal on click.
    // (In a real app, don't forget to use ARIA attributes
    // for accessibility!)
    const modal = this.state.showModal ? (
      <Modal>
        <div className="modal">
          <div>
            With a portal, we can render content into a different
            part of the DOM, as if it were any other React child.
          </div>
          This is being rendered inside the #modal-container div.
          <button onClick={this.handleHide}>Hide modal</button>
        </div>
      </Modal>
    ) : null;

    return (
      <div className="app">
        This div has overflow: hidden.
        <button onClick={this.handleShow}>Show modal</button>
        {modal}
      </div>
    );
  }
}




ReactDOM.render(<AppO />, appRoot);




















class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {clicks: 0};
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    // This will fire when the button in Child is clicked,
    // updating Parent's state, even though button
    // is not direct descendant in the DOM. 
    this.setState(prevState => ({
      clicks: prevState.clicks + 1
    }));
  }

  render() {
    return (
      <div>
        <p>Number of clicks: {this.state.clicks}</p>
        <p>
          Open up the browser DevTools
          to observe that the button
          is not a child of the div
          with the onClick handler.
        </p>
        <Modal>
          <Child DDDD={this.handleClick}/>
        </Modal>
      </div>
    );
  }
}

function Child(props) {
  // The click event on this button will bubble up to parent,
  // because there is no 'onClick' attribute defined
  return (
    <div className="modal">
      <button onClick={props.DDDD}>Click</button>
      <button>Click</button>
    </div>
  );
}


class Ck extends Component { 
  constructor() { 
    super();
    this.reff =  React.createRef();
  }
  componentDidMount() {
  
  }
  ccc() { 
    this.reff.current.aa();
  }
  render() { 
    return <> <HighOrderSecond
      username="Click Me" ref={this.reff}
    />
      <button onClick={this.ccc.bind(this)}>ces</button>
    </>
  }
}




class Cat extends React.Component {
  render() {
    const mouse = this.props.mouse;
    return (
      <img src={img3} style={{ position: 'absolute', height: '100px', width: '100px',left: mouse.x, top: mouse.y }} />
    );
  }
}

class Mouse extends React.Component {
  constructor(props) {
    super(props);
    this.handleMouseMove = this.handleMouseMove.bind(this);
    this.state = { x: 0, y: 0 };
  }

  handleMouseMove(event) {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  }

  render() {
    return (
      <div style={{ height: '100px', width: '100px' }} onMouseMove={this.handleMouseMove}>

        {/*
          Instead of providing a static representation of what <Mouse> renders,
          use the `render` prop to dynamically determine what to render.
        */}
        {this.props.render(this.state)}
      </div>
    );
  }
}

class MouseTracker extends React.Component {
  render() {
    return (
      <div>
        <h1>Move the mouse around!</h1>
        <Mouse render={mouse => (
          <Cat mouse={mouse} />
        )} />
      </div>
    );
  }
}

class Chosen extends React.Component {
  componentDidMount() {
    this.$el = $(this.el);
    //this.$el.chosen();

    this.handleChange = this.handleChange.bind(this);
    this.$el.on('change', this.handleChange);
  }
  
  componentDidUpdate(prevProps) {
    if (prevProps.children !== this.props.children) {
      this.$el.trigger("chosen:updated");
    }
  }

  componentWillMount() {
    console.log(31121);
}
  componentWillUnmount() {
    this.$el.off('change', this.handleChange);
    //this.$el.chosen('destroy');
  }
  
  handleChange(e) {
    this.props.onChange(e.target.value);
  }

  render() {
    return (
      <div>
        <select className="Chosen-select" ref={el => this.el = el}>
          {this.props.children}
        </select>
      </div>
    );
  }
}

function Example() {
  return (
    <Chosen onChange={value => console.log(value)}>
      <option>vanilla</option>
      <option>chocolate</option>
      <option>strawberry</option>
    </Chosen>
  );
}

ReactDOM.render(<Example />, appRoot);
 

// function Button() {
//   return <button id="btn">Say Hello</button>;
// }

// ReactDOM.render(
//   <Button />,
//  appRoot,
//   function() {
//     $('#btn').click(function() {
//       alert('Hello!');
//     });
//   }
// );













class Son extends React.Component  {
  constructor(props){
      super(props)
      this.state = {
         style:{ width:'100px',
          height:'100px',
          background: this.props.color  // props改变 state不会更新
      }}
  }



  componentDidMount() {
    console.log("1");
 
}

static getDerivedStateFromProps(props, state) {
  if (props.color !== state.style.background) {
    let newStyle = { ...state.style };
    newStyle.background = props.color;    
        return { 
          style:newStyle
        };
    }
    return null;
}
  render(){
      return(
          <div style = {this.state.style}>
          {console.log('Son render()')}
          </div>
      )
  }

}

class Father extends Component {
  constructor(){
      super()
      this.state = {
          color :'pink' 
      }
  }
  changeColor = (color)=>{
      this.setState({
          color:color
      })
  }
  render(){
      return(
          <>
              {console.log('Father render')}
              <button onClick = {this.changeColor.bind(null,'black')}>blcak</button>
              <button onClick = {this.changeColor.bind(null,'pink')}>pink</button>
              <button onClick = {this.changeColor.bind(null,'yellow')}>yellow</button>
              <Son color = {this.state.color}></Son>
          </> 
      )
      
  }

}









 class App2 extends Component {
  render() {
    return (
      <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/inbox">Inbox</Link></li>
        </ul>
        {this.props.children}
      </div>
    )
  }
}

    class About extends Component {
  render() {
    return <h3>About</h3>
  }
}

      class Inbox extends Component {
  render() {
    return (
      <div>
        <h2>Inbox</h2>
        {this.props.children || "Welcome to your Inbox"}
      </div>
    )
  }
}

     class Message extends Component {
  render() {
    return <h3>Message {this.props.params.id}</h3>
  }
}

class    LLL extends Component {
  render() {
    return  <Router>
    <Route path="/" component={App2}>
    
    </Route>
    <Route path="about" component={About} />
      <Route path="inbox" component={Inbox}>
     
    </Route>
    <Route path="messages/:id" component={Message} />
  </Router>
  }
}


class App21 extends Component {
  render() {
    return    <h1>
    11111
      
  
  </h1>
  }
}

ReactDOM.render(
  <BrowserRouter>
    {/* <Route path="/" component={App2}>
    
    </Route>
    <Route path="about" component={About} />
      <Route path="inbox" component={Inbox}>
     
    </Route>
    <Route path="messages/:id" component={Message} /> */}

        <BasicExample />

  </BrowserRouter>
,   document.getElementById('modal-roo2')
);












// ReactDOM.render(
//   <Father />,
//  appRoot
// );
